import { lazy, Suspense } from "react"
import { Navigate, useRoutes } from "react-router-dom"


import Loading from '../components/Loading'
const Login = lazy(() => import("../pages/Login"))
const Main = lazy(() => import("../pages/Main"))
const About = lazy(() => import("../pages/Main/About"))
const Home = lazy(() => import("../pages/Main/Home"))
const List = lazy(() => import("../components/List"))
const NotFund = lazy(() => import("../components/404"))

//封装一个函数 路由懒加载
const load = (Comp) => {
  return <Suspense fallback={<Loading />}>
    <Comp/>
  </Suspense>
}

const routes = [
  {
    path: '*',
    element: load(NotFund)
  },
  {
    path: '/',
    element: <Navigate to={<Login />} />
  },
  {
    path: '/login',
    element: load(Login)
  },
  {
    path: '/main',
    element: load(Main),
    children: [
      {
        path: '/main/about',
        element: load(About)
      },
      {
        path: '/main/home',
        element: load(Home),
        children: [
          {
            path: '/main/home/music/:id',
            element: load(List)
          },
          {
            path: '/main/home/news/:id',
            element: load(List)
          },
        ]
      }
    ]
  },
]
//第一种方式
export default routes

//第二个种方式 定义组件
export const GetRoutes = () => {
  return useRoutes(routes)
}

//第三种方式自定义hook
export const useMyRoutes = () => {
  return useRoutes(routes)
}